<template>
    <view class="record">
        <!-- 日期 -->
        <view class="day-type flex-box " style="text-align:center; display: flex;justify-content: center;">
            <picker @change="bindPickerStartDay" mode="date">
                <view class="flex-box icon">
                    <view class="icon-item calender"></view>
                    <text class="fx1">{{ time.start }}</text>
                </view>
            </picker>
            <text>至</text>
            <picker @change="bindPickerEndDay" mode="date">
                <view class="flex-box items">
                    <text class="fx2">{{ time.end }}</text>
                </view>
            </picker>
        </view>

        <view class="table-box">
            <view class="table-tt">
                <view class="tr flex-box">
                    <view class="td">序号</view>
                    <view class="td">车号</view>
                    <view class="td-font-size ">
                        <picker @change="bindPickerChange" :value="array.index" :range="array.list" style="margin-left:14rpx">
                            品名
                            <uni-icon type="arrowdown"></uni-icon>
                        </picker>
                    </view>
                    <view class="td" style="padding-left:20rpx">数量</view>
                    <view class="td w">登记人</view>
                    <view class="td w">状态</view>
                    <view class="td w">登记时间</view>
                </view>
            </view>
            <view class="table-tt navTop" v-show="navTop">
                <view class="tr flex-box">
                    <view class="td">序号</view>
                    <view class="td">车号</view>
                    <view class="td-font-size ">
                        <picker @change="bindPickerChange" :value="array.index" :range="array.list" style="margin-left:14rpx">
                            品名
                            <uni-icon type="arrowdown"></uni-icon>
                        </picker>
                    </view>
                    <view class="td" style="padding-left:20rpx">数量</view>
                    <view class="td w">登记人</view>
                    <view class="td w">状态</view>
                    <view class="td w">登记时间</view>
                </view>
            </view>
            <view class="table-body">
                <view class="tr flex-box" v-for="(item, index) in table" :key="index">
                    <view class="td">{{index+1}}</view>
                    <view class="td">{{ item.car_num }}</view>
                    <view class="td">{{ item.goods_name }}</view>
                    <view class="td">{{ item.number }}</view>
                    <view class="td">{{ item.note_taker}}</view>
                    <view class="td">{{ item.check_status }}</view>
                    <view class="td w">{{ item.note_taker_time }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    uniIcon,
    uniPopup
} from "@dcloudio/uni-ui";
import {
    request
} from "../../../comon/js/request.js";

export default {
    data() {
        return {
            navTop: false,
            maxPage: 0,
            formData: {
                page: 1
            },
            time: {
                start: "选择开始时间",
                end: "选择结束时间"
            },
            popup: false,
            array: {
                list: [],
                index: 0
            },
            table: []
        };
    },
    onReachBottom() {
        console.log(this.page, this.maxPage);
        if (this.formData.page < this.maxPage) {
            this.upInit();
        } else {
            return null;
        }
    },
    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop >= 100) {
            if (!this.navTop) {
                this.navTop = true;
            }
        } else {
            if (this.navTop) {
                this.navTop = false;
            }
        }
    },
    methods: {
        getLists() {
            request({
                url: "v1/stock/list",
                method: "GET",
                data: this.formData
            }).then(res => {
                console.log(res);
                this.table = this.table.concat(res.data.result.list.data);
            });
        },

        getListsTime() {
            request({
                url: "v1/stock/list",
                method: "GET",
                data: this.formData
            }).then(res => {
                console.log(res);
                this.table = res.data.result.list.data;
            });
        },

        upInit() {
            this.formData.page++;
            this.getLists();
        },
        bindPickerStartDay(e) {
            console.log(e);
            this.time.start = e.detail.value;
            this.formData = {
                record_time_start: this.time.start,
                record_time_end: this.time.end,
                page: 1
            };
            this.getListsTime();
        },
        bindPickerEndDay(e) {
            console.log(e);
            this.time.end = e.detail.value;
            this.formData = {
                record_time_start: this.time.start,
                record_time_end: this.time.end,
                page: 1
            };
            this.getListsTime();
        },
        bindPickerChange(e) {
            console.log(this.array.list[e.detail.value]);
            request({
                url: "v1/stock/list",
                data: {
                    goods_name: this.array.list[e.detail.value]
                }
            }).then(res => {
                this.table = res.data.result.list.data;
            });
        },

        getMsg() {
            request({
                url: "v1/stock/list",
                method: "GET",
                data: {
                    page: 1
                }
            }).then(res => {
                console.log(res);
                this.maxPage = res.data.result.list.last_page;
                this.table = res.data.result.list.data;
                this.array.list = res.data.result.list.data.map(item => {
                    return item.goods_name;
                });
                let arrayList = this.array.list;

                function newArr(arrayList) {
                    return Array.from(new Set(arrayList));
                }
                this.array.list = newArr(arrayList);
            });
        }
    },
    onShow() {
        this.getMsg();
    },
    components: {
        uniIcon,
        uniPopup
    }
};
</script>

<style lang="scss">
.navTop {
    position: fixed;
    top: 0rpx;
    z-index: 99;
    width: 750rpx;
    background: #e4ecf3;
}

.day-type {
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-around;
    height: 50rpx;
    font-size: 20rpx;
    border: 1rpx solid #f0f4f8;
    border-right: 25%;
    background-color: #f0f4f8;

    .icon {
        position: relative;

        .icon-item {
            position: absolute;
            top: 0rpx;
            left: -50rpx;
        }
    }

    .fx1 {
        margin-right: 10rpx;
    }

    .fx2 {
        margin-left: 10rpx;
    }
}

.record {
    .tr {
        justify-content: space-around;
    }

    .td {
        flex: 1;
    }

    .table-body {}

    .td-font-size {
        font-size: 28rpx;
    }
}
</style>
